<template>
    <div
        class="customerInfo"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <cardComponent pageTitle="客户信息维护类-->客户信息及地址资料查询">
            <template slot="cardBody">
                <el-card class="infoCard">
                    <div slot="headerss" class="clearfix">
                        <span>客户资料查询</span>
                    </div>
                    <div class="cardInfo">
                        <el-form
                            class="infoForm"
                            ref="infoForm"
                            :model="infoData"
                            size="small"
                            label-width="90px"
                        >
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item
                                        label="手机号码:"
                                        label-position="left"
                                    >{{ infoData.MOBILEPHONE }}</el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item
                                        label="家庭电话:"
                                        label-position="left"
                                    >{{ infoData.HOMEPHONE }}</el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item
                                        label="公司电话:"
                                        label-position="left"
                                    >{{ infoData.BUSIPHONE }}</el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item
                                        label="E-mail地址:"
                                        label-position="left"
                                    >{{ infoData.EMAIL }}</el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item
                                        label="传真机号码:"
                                        label-position="left"
                                    >{{ infoData.FAXNO }}</el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item
                                        label="分机:"
                                        label-position="left"
                                    >{{ infoData.BUSIEXT }}</el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item
                                        label="部门:"
                                        label-position="left"
                                    >{{ infoData.DEPT }}</el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item
                                        label="单位名称:"
                                        label-position="left"
                                    >{{ infoData.BUSINAME }}</el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item
                                        label="职务分类:"
                                        label-position="left"
                                    >{{ infoData.JOBPOSIT | getText(jobTypeList) }}</el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item
                                        label="性别:"
                                        label-position="left"
                                    >{{ infoData.GENDER === 'M' ? '男' : '女'}}</el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item
                                        label="婚姻状况:"
                                        label-position="left"
                                    >{{ infoData.MARRIED | getText(marriedList) }}</el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item
                                        label="国籍:"
                                        label-position="left"
                                    >{{ infoData.NATION | getText(nationList) }}</el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="8">
                                    <el-form-item
                                        label="教育程度:"
                                        label-position="left"
                                    >{{ infoData.EDUCATION | getText(educationList) }}</el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item
                                        label="预留问题:"
                                        label-position="left"
                                    >{{ infoData.RESERVE }}</el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item
                                        label="预留答案:"
                                        label-position="left"
                                    >{{ infoData.RESERVE2 }}</el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                </el-card>
                <el-card class="addressCard">
                    <div slot="headerss" class="clearfix">
                        <span>客户地址资料查询</span>
                    </div>
                    <div class="cardInfo">
                        <el-form
                            class="addressForm"
                            ref="addressForm"
                            :model="addressData"
                            size="small"
                            label-width="90px"
                        >
                            <div class="infoHeader">
                                <span class="title">账户类型:</span>
                                <span class="content">{{ accountType }}</span>
                            </div>
                            <div class="infoHeader">
                                <span class="title">账单地址类型:</span>
                                <span class="content">
                                    <el-radio-group v-model="addressData.STSMAIL">
                                        <el-radio disabled label="H">家庭地址</el-radio>
                                        <el-radio disabled label="B">公司地址</el-radio>
                                        <el-radio disabled label="F">户籍地址</el-radio>
                                        <el-radio disabled label="W">房产地址</el-radio>
                                    </el-radio-group>
                                </span>
                            </div>
                            <!-- <el-form-item label="账户类型:" label-width="120px" label-position="left">
                                {{ accountType }}
                            </el-form-item>
                            <el-form-item label="账单地址类型:" label-width="120px" label-position="left" prop="STSMAIL">
                                <el-radio-group v-model="addressData.STSMAIL">
                                    <el-radio disabled label="H">家庭地址</el-radio>
                                    <el-radio disabled label="B">公司地址</el-radio>
                                    <el-radio disabled label="F">户籍地址</el-radio>
                                    <el-radio disabled label="W">房产地址</el-radio>
                                </el-radio-group>
                            </el-form-item>-->
                            <div class="addressInfo">
                                <!-- 家庭地址 -->
                                <el-card class="box-card">
                                    <div slot="headerss" class="clearfix">
                                        <span>家庭地址</span>
                                    </div>
                                    <div class="info">
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="邮政编码:" label-position="left">
                                                    <!-- <el-input v-model="addressData.POSTCODE1"></el-input> -->
                                                    <span>{{ addressData.POSTCODE1 }}</span>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="所在地:" label-position="left">
                                                    <el-radio-group v-model="addressData.AD1OS">
                                                        <el-radio disabled :label="'0'">国内</el-radio>
                                                        <el-radio disabled :label="'1'">国外</el-radio>
                                                    </el-radio-group>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-form-item label="地址区段1:" label-position="left">
                                            <!-- <el-input v-model="addressData.ADD11"></el-input> -->
                                            <span>{{ addressData.ADD11 }}</span>
                                        </el-form-item>
                                        <el-form-item label="地址区段2:" label-position="left">
                                            <!-- <el-input v-model="addressData.ADD12"></el-input> -->
                                            <span>{{ addressData.ADD12 }}</span>
                                        </el-form-item>
                                        <el-form-item label="地址区段3:" label-position="left">
                                            <!-- <el-input v-model="addressData.ADD13"></el-input> -->
                                            <span>{{ addressData.ADD13 }}</span>
                                        </el-form-item>
                                        <el-form-item label="地址区段4:" label-position="left">
                                            <!-- <el-input v-model="addressData.ADD14"></el-input> -->
                                            <span>{{ addressData.ADD14 }}</span>
                                        </el-form-item>
                                        <el-form-item label="地址区段5:" label-position="left">
                                            <!-- <el-input v-model="addressData.ADD15"></el-input> -->
                                            <span>{{ addressData.ADD15 }}</span>
                                        </el-form-item>
                                    </div>
                                </el-card>

                                <!-- 公司地址 -->
                                <el-card class="box-card">
                                    <div slot="headerss" class="clearfix">
                                        <span>公司地址</span>
                                    </div>
                                    <div class="info">
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="邮政编码:" label-position="left">
                                                    <!-- <el-input v-model="addressData.POSTCODE2"></el-input> -->
                                                    <span>{{ addressData.POSTCODE2 }}</span>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="所在地:" label-position="left">
                                                    <el-radio-group v-model="addressData.AD2OS">
                                                        <el-radio disabled :label="'0'">国内</el-radio>
                                                        <el-radio disabled :label="'1'">国外</el-radio>
                                                    </el-radio-group>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-form-item label="地址区段1:" label-position="left">
                                            <!-- <el-input v-model="addressData.ADD21"></el-input> -->
                                            <span>{{ addressData.ADD21 }}</span>
                                        </el-form-item>
                                        <el-form-item label="地址区段2:" label-position="left">
                                            <!-- <el-input v-model="addressData.ADD22"></el-input> -->
                                            <span>{{ addressData.ADD22 }}</span>
                                        </el-form-item>
                                        <el-form-item label="地址区段3:" label-position="left">
                                            <!-- <el-input v-model="addressData.ADD23"></el-input> -->
                                            <span>{{ addressData.ADD23 }}</span>
                                        </el-form-item>
                                        <el-form-item label="地址区段4:" label-position="left">
                                            <!-- <el-input v-model="addressData.ADD24"></el-input> -->
                                            <span>{{ addressData.ADD24 }}</span>
                                        </el-form-item>
                                        <el-form-item label="地址区段5:" label-position="left">
                                            <!-- <el-input v-model="addressData.ADD25"></el-input> -->
                                            <span>{{ addressData.ADD25 }}</span>
                                        </el-form-item>
                                    </div>
                                </el-card>

                                <!-- 户籍地址 -->
                                <el-card class="box-card">
                                    <div slot="headerss" class="clearfix">
                                        <span>户籍地址</span>
                                    </div>
                                    <div class="info">
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="邮政编码:" label-position="left">
                                                    <!-- <el-input v-model="addressData.POSTCODE3"></el-input> -->
                                                    <span>{{ addressData.POSTCODE3 }}</span>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="所在地:" label-position="left">
                                                    <el-radio-group v-model="addressData.AD3OS">
                                                        <el-radio disabled :label="'0'">国内</el-radio>
                                                        <el-radio disabled :label="'1'">国外</el-radio>
                                                    </el-radio-group>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-form-item label="地址区段1:" label-position="left">
                                            <!-- <el-input v-model="addressData.ADD31"></el-input> -->
                                            <span>{{ addressData.ADD31 }}</span>
                                        </el-form-item>
                                        <el-form-item label="地址区段2:" label-position="left">
                                            <!-- <el-input v-model="addressData.ADD32"></el-input> -->
                                            <span>{{ addressData.ADD32 }}</span>
                                        </el-form-item>
                                        <el-form-item label="地址区段3:" label-position="left">
                                            <!-- <el-input v-model="addressData.ADD33"></el-input> -->
                                            <span>{{ addressData.ADD33 }}</span>
                                        </el-form-item>
                                        <el-form-item label="地址区段4:" label-position="left">
                                            <!-- <el-input v-model="addressData.ADD34"></el-input> -->
                                            <span>{{ addressData.ADD34 }}</span>
                                        </el-form-item>
                                        <el-form-item label="地址区段5:" label-position="left">
                                            <!-- <el-input v-model="addressData.ADD35"></el-input> -->
                                            <span>{{ addressData.ADD35 }}</span>
                                        </el-form-item>
                                    </div>
                                </el-card>

                                <!-- 房产地址 -->
                                <el-card class="box-card">
                                    <div slot="headerss" class="clearfix">
                                        <span>房产地址</span>
                                    </div>
                                    <div class="info">
                                        <el-row>
                                            <el-col :span="12">
                                                <el-form-item label="邮政编码:" label-position="left">
                                                    <!-- <el-input v-model="addressData.POSTCODE4"></el-input> -->
                                                    <span>{{ addressData.POSTCODE4 }}</span>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-form-item label="所在地:" label-position="left">
                                                    <el-radio-group v-model="addressData.AD4OS">
                                                        <el-radio disabled :label="'0'">国内</el-radio>
                                                        <el-radio disabled :label="'1'">国外</el-radio>
                                                    </el-radio-group>
                                                </el-form-item>
                                            </el-col>
                                        </el-row>
                                        <el-form-item label="地址区段1:" label-position="left">
                                            <!-- <el-input v-model="addressData.ADD41"></el-input> -->
                                            <span>{{ addressData.ADD41 }}</span>
                                        </el-form-item>
                                        <el-form-item label="地址区段2:" label-position="left">
                                            <!-- <el-input v-model="addressData.ADD42"></el-input> -->
                                            <span>{{ addressData.ADD42 }}</span>
                                        </el-form-item>
                                        <el-form-item label="地址区段3:" label-position="left">
                                            <!-- <el-input v-model="addressData.ADD43"></el-input> -->
                                            <span>{{ addressData.ADD43 }}</span>
                                        </el-form-item>
                                        <el-form-item label="地址区段4:" label-position="left">
                                            <!-- <el-input v-model="addressData.ADD44"></el-input> -->
                                            <span>{{ addressData.ADD44 }}</span>
                                        </el-form-item>
                                        <el-form-item label="地址区段5:" label-position="left">
                                            <!-- <el-input v-model="addressData.ADD45"></el-input> -->
                                            <span>{{ addressData.ADD45 }}</span>
                                        </el-form-item>
                                    </div>
                                </el-card>
                            </div>
                        </el-form>
                    </div>
                </el-card>
            </template>
        </cardComponent>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import { getAccountTypeName, getDictSelectList } from '@/utils/Common';
import cardComponent from '@/components/cardComponent/cardComponent.vue';

export default {
    components: {
        cardComponent,
    },
    data() {
        return {
            pageLoading: true,
            accountType: '', // 账户类型
            jobTypeList: [], // 职务类型
            marriedList: [], // 婚姻状况转译列表
            nationList: [], // 国籍转译列表
            educationList: [], // 教育程度转译列表
            infoData: {}, // 客户信息
            // 客户地址信息表单
            addressData: {},
        };
    },

    mounted() {
        // 查询信息
        this.init();
    },

    // 取缓存信息
    computed: mapState({
        cardList: state => state.common.cardList_3601, // 卡列表信息
        defaultCard: state => state.common.cardInfo_3004, // 默认卡信息
        defaultParams: state => state.common.defaultParams, // 接口默认参数
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志
    }),

    filters: {
        // 状态转译
        getText(val, list) {
            let text = '';
            list.forEach((item) => {
                if (item.code.trim() === val) {
                    text = item.label;
                }
            });
            return text;
        },
    },

    methods: {

        async init() {
            // 获取职务类型转译列表
            this.jobTypeList = await getDictSelectList('JOBPOSIT', this);

            // 获取婚姻状况转译列表
            this.marriedList = await getDictSelectList('MARRIED', this);

            // 获取国籍转译列表
            this.nationList = await getDictSelectList('NATION', this);

            // 获取教育程度转译列表
            this.educationList = await getDictSelectList('EDUCATION', this);

            // 获取账户类型
            this.accountType = await getAccountTypeName(this.cardList, this.defaultCard, this);

            // 获取初始化数据
            this.handleGetInfoData();
        },

        // 3002交易 -> 获取客户信息
        handleGetInfoData() {
            this.pageLoading = true;
            const appBody = {
                CARDNBR: this.defaultCard.CARDNO,
                INQOPT: 1,
                OPTION: 1,
                PINFLAG: this.pinFlag,
            };
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            params.body.appHead.tranCode = '3002';
            params.body.appBody = appBody;

            // 跑 3002 交易
            this.$post.common.transPort(params).then((res) => {
                // 获取地址信息
                this.handleGetAddressData();

                if (res.status === 200) { // 请求成功
                    const result = JSON.parse(res.data.jsonRes);
                    if (result.sysHead.rspCd === '000000') { // 交易成功
                        const data = result.body.appBody;
                        console.log(result, 'result -- 3002');
                        // 表单赋值
                        this.infoData = data;
                    } else { // 交易失败
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, result.sysHead.rspDesc, {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else { // 请求失败
                    this.$alert('请求失败!', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
        },

        // 3003 交易 -> 获取地址信息
        handleGetAddressData() {
            const appBody = {
                CARDNBR: this.defaultCard.CARDNO,
                INQOPT: 1,
                OPTION: 1,
                PINFLAG: this.pinFlag,
            };
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            params.body.appHead.tranCode = '3003';
            params.body.appBody = appBody;

            // 跑 3003 交易
            this.$post.common.transPort(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) { // 请求成功
                    const result = JSON.parse(res.data.jsonRes);
                    if (result.sysHead.rspCd === '000000') { // 交易成功
                        const data = result.body.appBody;
                        console.log(result, 'result -- 3003');
                        // 表单赋值
                        this.addressData = data;
                    } else { // 交易失败
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, result.sysHead.rspDesc, {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else { // 请求失败
                    this.$alert('请求失败!', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
        },
    },
};
</script>
<style lang="scss">
.customerInfo {
    .el-form-item__label {
        color: #999;
    }
    .el-form-item__content {
        color: #333;
    }
    .infoCard {
        margin-bottom: 30px;
    }

    .infoCard {
        & > .el-card__header {
            padding: 8px !important;
            font-weight: 700;
            font-size: 18px;
        }
    }

    .addressCard {
        & > .el-card__header {
            padding: 8px !important;
            font-weight: 700;
            font-size: 18px;
        }
        & > .el-card__body {
            padding: 0;
        }
    }
}
</style>
<style lang="scss" scoped>
.customerInfo {
    .addressForm {
        .infoHeader {
            padding-left: 14px;
            margin: 10px 0;

            .title {
                margin-right: 10px;
            }
        }
        .addressInfo {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin-top: 16px;

            .box-card {
                width: 48%;
                margin-bottom: 30px;
            }
        }
        .btnBox {
            text-align: center;
        }
    }
}
</style>
